!(function ($) {
  // 1.渲染默认的第一页50条数据
  $.ajax({
    url: "http://localhost/js2112/dongfang/php/list.php",
    dataType: "json",
  }).then(function (resData) {
    let str = "";
    let arrData = resData.pagecontent;
    $.each(arrData, function (index, value) {
      str += `
      <a href="detail.html?sid=${value.id}">
                <li>
                    <img class="lazy" data-original="${value.goods_img}"/>
                    <p class="title2">${value.goods_title}</p>
                    <span>${"￥" + value.goods_price}</span>
                    <p class="more_link">
                                  <span class="addtocart">加入购物车</span>
                                  <span class="zoom"></span>
                                  <span class="favorit"></span>
                                  <span class="pk"></span>
                                </p>
                </li>
              </a>
            `;
    });

    $(".layer_inner1 ul").html(str);
    // 2.添加图片懒加载

    $("img.lazy").lazyload({
      effect: "slideDown",
    });

    // 3.添加分页
    $(".page").pagination({
      pageCount: resData.pagesize,
      jump: true,
      coping: true,
      homePage: "首页",
      endPage: "末页",
      prevContent: "上页",
      nextContent: "下页",
      callback: function (api) {
        $.ajax({
          method: "get",
          url: "http://localhost/js2112/dongfang/php/list.php",
          data: {
            page: api.getCurrent(),
          },
          dataType: "json",
        }).then(function (resData) {
          //传递页面之后，重新渲染页面。
          let str = "";
          let arrData = resData.pagecontent;
          $.each(arrData, function (index, value) {
            str += `
            <a href="detail.html?sid=${value.id}">
            <li>
                <img class="lazy" data-original="${value.goods_img}"/>
                <p class="title2">${value.goods_title}</p>
                <span>${"￥" + value.goods_price}</span>
                <p class="more_link">
                              <span class="addtocart">加入购物车</span>
                              <span class="zoom"></span>
                              <span class="favorit"></span>
                              <span class="pk"></span>
                            </p>
            </li>
          </a>
                        `;
          });

          $(".layer_inner1 ul").html(str);
          $("img.lazy").lazyload({
            effect: "slideDown",
          });
        });
      },
    });
    // 4.排序操作

    $(".jiage a").on("click", function () {
      if ($(this).hasClass("asc_desc")) {
        $(this).attr("class", "asc_desc_desc");

        $(".asc_desc_desc").on("click", function () {
          $(".page").pagination({
            pageCount: resData.pagesize,
            jump: true,
            coping: true,
            homePage: "首页",
            endPage: "末页",
            prevContent: "上页",
            nextContent: "下页",
            callback: function (api) {
              $.ajax({
                method: "get",
                url: "http://localhost/js2112/dongfang/php/list.php",
                data: {
                  page: api.getCurrent(),
                  sort: "desc",
                },
                dataType: "json",
              }).then(function (resData) {
                let str = "";
                let arrData = resData.pagecontent;
                $.each(arrData, function (index, value) {
                  str += `
              <a href="detail.html?sid=${value.id}">
              <li>
                  <img class="lazy" data-original="${value.goods_img}"/>
                  <p class="title2">${value.goods_title}</p>
                  <span>${"￥" + value.goods_price}</span>
                  <p class="more_link">
                                <span class="addtocart">加入购物车</span>
                                <span class="zoom"></span>
                                <span class="favorit"></span>
                                <span class="pk"></span>
                              </p>
              </li>
            </a>
                          `;
                });

                $(".layer_inner1 ul").html(str);
                $("img.lazy").lazyload({
                  effect: "slideDown",
                });
              });
            },
          });

          $.ajax({
            url: "http://localhost/js2112/dongfang/php/list.php",
            dataType: "json",
            data: {
              page: 1,
              sort: "desc",
            },
          }).then(function (resData) {
            let str = "";
            let arrData = resData.pagecontent;
            $.each(arrData, function (index, value) {
              str += `
          <a href="detail.html?sid=${value.id}">
          <li>
              <img class="lazy" data-original="${value.goods_img}"/>
              <p class="title2">${value.goods_title}</p>
              <span>${"￥" + value.goods_price}</span>
              <p class="more_link">
                            <span class="addtocart">加入购物车</span>
                            <span class="zoom"></span>
                            <span class="favorit"></span>
                            <span class="pk"></span>
                          </p>
          </li>
        </a>
                  `;
            });

            $(".layer_inner1 ul").html(str);
            $("img.lazy").lazyload({
              effect: "slideDown",
            });
          });
        });
      } else {
        $(this).attr("class", "asc_desc");
        // 升序
        $(".asc_desc").on("click", function () {
          $(".page").pagination({
            pageCount: resData.pagesize,
            jump: true,
            coping: true,
            homePage: "首页",
            endPage: "末页",
            prevContent: "上页",
            nextContent: "下页",
            callback: function (api) {
              $.ajax({
                method: "get",
                url: "http://localhost/js2112/dongfang/php/list.php",
                data: {
                  page: api.getCurrent(),
                  sort: "asc",
                },
                dataType: "json",
              }).then(function (resData) {
                let str = "";
                let arrData = resData.pagecontent;
                $.each(arrData, function (index, value) {
                  str += `
              <a href="detail.html?sid=${value.id}">
              <li>
                  <img class="lazy" data-original="${value.goods_img}"/>
                  <p class="title2">${value.goods_title}</p>
                  <span>${"￥" + value.goods_price}</span>
                  <p class="more_link">
                                <span class="addtocart">加入购物车</span>
                                <span class="zoom"></span>
                                <span class="favorit"></span>
                                <span class="pk"></span>
                              </p>
              </li>
            </a>
                          `;
                });

                $(".layer_inner1 ul").html(str);
                $("img.lazy").lazyload({
                  effect: "slideDown",
                });
              });
            },
          });

          $.ajax({
            url: "http://localhost/js2112/dongfang/php/list.php",
            dataType: "json",
            data: {
              page: 1,
              sort: "asc",
            },
          }).then(function (resData) {
            let str = "";
            let arrData = resData.pagecontent;
            $.each(arrData, function (index, value) {
              str += `
          <a href="detail.html?sid=${value.id}">
          <li>
              <img class="lazy" data-original="${value.goods_img}"/>
              <p class="title2">${value.goods_title}</p>
              <span>${"￥" + value.goods_price}</span>
              <p class="more_link">
                            <span class="addtocart">加入购物车</span>
                            <span class="zoom"></span>
                            <span class="favorit"></span>
                            <span class="pk"></span>
                          </p>
          </li>
        </a>
                  `;
            });

            $(".layer_inner1 ul").html(str);
            $("img.lazy").lazyload({
              effect: "slideDown",
            });
          });
        });
      }
    });
  });
})(jQuery);
